<template>
  <div>
    <el-cascader
      filterable
      clearable
      placeholder="试试搜索：手机"
      v-model="paths"
      :options="categoryOptions"
      :props="props"
      :style="{width:cascaderWidth}"
      :size="size"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
  import { listCategory} from "@/api/mall/pms/category";

  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    //接受父组件传来的值
    props: {
      //值
      catelogPath: {
        type: Array,
        default(){
          return [];
        }
      },
      //尺寸 medium / small / mini
      size:{
        type: String,
        default(){
          return 'small '
        }
      },
      //宽度
      cascaderWidth: {
        type: String,
        default(){
          return '300px'
        }
      }
    },
    data() {
      //这里存放数据
      return {
        //级联选择器
        props: {
          value: 'id',
          label: 'name',
          children: 'children'
        },
        //分类数据
        categoryOptions:[],
        paths: this.catelogPath
      };
    },
    watch:{
      catelogPath(){
        this.paths = this.catelogPath;
      }
    },
    //方法集合
    methods: {
      getCategorys() {
        this.categoryOptions = [];
        listCategory().then(response => {
          this.categoryOptions = this.handleTree(response.data, "id", "parentId");
        })
      },
      handleChange(data){
        this.$emit("handleChange",data);
      },
      //清除数据
      resetHandle(){
        this.paths=[];
      },
    },

    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getCategorys();
    }
  };
</script>
<style scoped>
</style>
